<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-form ref="queryFormData" :model="queryFormData" inline size="small">
                    <el-form-item label="评论日期">
                        <el-date-picker v-model="rangeDateValue" align="center" end-placeholder="结束日期" range-separator="-"
                            start-placeholder="开始日期" type="daterange" unlink-panels>
                        </el-date-picker>
                    </el-form-item>
                    <el-button size="small" icon="el-icon-search" @click="search">搜索</el-button>
                </el-form>
            </div>
            <el-table v-loading="loading" :data="tableData" size="mini" style="width: 100%">
                <el-table-column prop="userName" label="用户名" width="150" align="center" />
                <el-table-column prop="content" label="评论内容" align="center">
                    <template slot-scope="{row}">
                        <p style="height: 100px; overflow: scroll">{{ row.content }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="up" label="评分" align="center" width="180">
                    <template slot-scope="{ row }">
                        <el-rate v-model="row.up" :icon-classes="iconClasses" void-icon-class="icon-rate-face-off"
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']" disabled>
                        </el-rate>
                    </template>
                </el-table-column>
                <el-table-column prop="createTimeStr" label="评论时间" width="180" align="center" />
                <el-table-column label="操作" align="center" width="170">
                    <template slot-scope="{ row }">
                        <el-switch v-model="row.dataFlag" :active-value="0" :inactive-value="1" active-text="生效"
                            inactive-text="失效" @change="change(row.id)" />
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next, total"
                    :current-page="pageNum" :page-size="pageSize" :total="total" />
            </div>
        </div>
    </div>
</template>  

<script>
import '../assets/elementStyle/fonts/style.css'; // 笑脸图标生效
import { listComment, updateCommentDataFlag } from '../api/index';
export default {
    data() {
        return {
            rangeDateValue: '',
            queryFormData: {
                songId: this.$route.query.songId,
                songListId: this.$route.query.songListId,
                createStartTime: '',
                createEndTime: ''
            },
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            loading: true,
            iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']
        }
    },
    mounted() {
        this.getData();
    },
    watch: {
        rangeDateValue: {
            handler: function (val) {
                if (val && val.length === 2) {
                    this.queryFormData.createStartTime = this.dayjs(val[0]).format("YYYY-MM-DD 00:00:00");
                    this.queryFormData.createEndTime = this.dayjs(val[1]).format("YYYY-MM-DD 23:59:59");
                } else {
                    this.queryFormData.createStartTime = '';
                    this.queryFormData.createEndTime = '';
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        getData() {
            this.loading = true;
            const { queryFormData, pageNum, pageSize } = this;
            listComment(queryFormData, pageNum, pageSize).then(res => {
                this.loading = false;
                const { data, total, success } = res;
                if (!success) {
                    this.$message.error('查询失败');
                    this.tableData = [];
                    return;
                }
                this.tableData = data.map(e => {
                    return {
                        ...e,
                        toggle: false
                    }
                });
                this.total = total;
            })
        },
        handleCurrentChange(currentPageNum) {
            this.pageNum = currentPageNum;
            this.getData();
        },
        search() {
            this.getData();
        },
        change(id) {
            updateCommentDataFlag(id).then(res => {
                const { success } = res;
                if (success) {
                    this.$message.success("操作成功");
                    this.getData();
                } else {
                    this.$message.error("操作失败");
                }
            });
        }
    }
}

</script>